<template>
  <div class="hry-login-wrapper">
    <div :class="isPC ? 'pc-circle-backgroud' : 'mobile-circle-backgroud'">
      <div>
        <div>
          <div class="login-main">
            <p>影沐后台管理系统</p>
                      <a-form
                        class="ant-advanced-search-form"
                        :form="form"
                        @submit="handleSubmit"
                      >
                        <a-form-item v-bind="formItemLayout" label="账号">
                          <a-input
                            size="large"
                            v-decorator="[
                              'username',
                              { rules: [{ required: true, message: '必选项' }] }
                            ]"
                          />
                        </a-form-item>
                        <a-form-item v-bind="formItemLayout" label="密码">
                          <a-input
                            size="large"
                            type="password"
                            v-decorator="[
                              'password',
                              { rules: [{ required: true, message: '必选项' }] }
                            ]"
                          />
                        </a-form-item>
                        <a-form-item v-bind="formItemLayout" label="验证码">
                          <a-row>
                            <a-col :span="14">
                              <a-input
                                size="large"
                                style="width:100%"
                                v-decorator="[
                                  'code',
                                  { rules: [{ required: true, message: '必选项' }] }
                                ]"
                              />
                            </a-col>
                            <a-col :span="6">
                              <img :src="imgSrc" id="code" alt="captcha" @click="clickCode" />
                            </a-col>
                          </a-row>
                        </a-form-item>
                        <a-row>
                          <a-col :span="24" :style="{ textAlign: 'center' }">
                            <a-button
                                    class="loginBtn"
                              size="large"
                              type="primary"
                              html-type="submit"
                            >
                              登录
                            </a-button>
                          </a-col>
                        </a-row>
                      </a-form>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "index",
  data() {
    return {
      form: this.$form.createForm(this),
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 4 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 20 }
        }
      },
      imgSrc: ""
    };
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((error, values) => {
        if (!error) {
          this.$ajax
            .post(this.$api.login, values)
            .then(res => {
              this.$notification.success({
                message: "登录成功！"
              });
              localStorage.setItem("token", this.$crypto.setAES(res.token));
              this.$store.dispatch("changeLoginState", true);
              this.$store.dispatch("changeName", res.username);
              this.$router.push({ name: "home" });
            })
            .catch(err => {
              this.getCode();
              this.$notification.error({
                message: err
              });
            });
        } else {
          return false;
        }
      });
    },
    clickCode() {
      this.getCode();
    },
    getCode() {
      this.$ajax
        .post(this.$api.getCode, false)
        .then(res => {
          this.imgSrc = res;
        })
        .catch(err => {
          this.$notification.error({
            message: err
          });
        });
    }
  },
  created() {
    this.getCode();
  },
  computed: {
    ...mapState(["isPC"])
  }
};
</script>

<style scoped lang="less">
.hry-login-wrapper {
  width: 100%;
  height: 100%;
  background: url("@{images}/imgAdmin/loginBgd.jpg") no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pc-circle-backgroud{
  width: 731px;
  height: 731px;
  background-color: rgba(255,255,255,0.38);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pc-circle-backgroud>div{
  width: 617px;
  height: 617px;
  background-color: rgba(255,255,255,0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pc-circle-backgroud>div>div{
  width: 513px;
  height: 513px;
  background-color: rgba(255,255,255,0.84);
  border-radius: 50%;
}
.pc-circle-backgroud .loginBtn{
  width: 38%;
  background-color: #001529;
  margin-top: 48px
}
.login-main{
  width: 73%;
  margin: auto;
  padding-top: 14.5%;
  text-align: center;
  font-size: 30px;
  color: #001529;
  font-family:Microsoft YaHei;
  font-weight: 400;
}
.login-main>p:first-child{
  margin-bottom: 62px;
}

.mobile-circle-backgroud .login-main{
  width: 90%;
  padding-left: 50px;
  padding-right: 50px;
  padding-bottom: 50px;
  background-color: rgba(255,255,255,0.84);
  border-radius: 20px;
}
.mobile-circle-backgroud .loginBtn{
  width: 38%;
  background-color: #001529;
  margin-top: 28px
}
.mobile-circle-backgroud .login-main{
  font-size: 26px;
}
.mobile-circle-backgroud #code{
  width: 100px;
}

#code {
  display: block;
  width: 119px;
  border-radius: 5px;
  height: 42px;
}
</style>
